<!DOCTYPE html>
<html>
<head>
    <title>模块列表</title>
    <link rel="stylesheet" href="__STATIC__/js/jquery-ui/jquery-ui.css">
    <include file='public/head'>
        <style>
            .layui-width-100{width: 100px !important;}
            .layui-legend-size{font-size:14px !important;}
            .layui-nopadding{padding:0 !important;}
            .layui-nomargin{margin: 0 !important;}
            .layui-bottom{
                border-width: 0 0 1px 0;
                border-style: solid;
                border-color: rgb(226, 226, 226);
            }
            .layui-input{height:30px !important; }
            .layui-top-margin{margin: 2px 0;}
            .layui-left-margin{margin-left: 10px;}
            .layui-table-page {padding: 7px 0px 0px;}
        </style>
</head>
<body>
    <div class="layui-tab " lay-filter="demo-tab">
        <!-- layui-tab开始 -->
        <div class="layui-tab-nav">
            <!-- 顶部导航菜单开始 -->
            <ul class="layui-tab-title">
                {:getNav('module_config','nav/index')};
            </ul>
        </div>
        <!-- 顶部导航菜单结束 -->
        <!-- 搜索栏开始 -->
        <fieldset class="layui-elem-field layui-field-title " style="border-width: 1px;padding-left: 10px;">
            <legend class="layui-legend-size">搜索</legend>
            <form class="layui-form table-bar" action="{:cmf_plugin_url('ModuleConfig://nav/index')}" lay-filter="form-bar" method="post">
                <div class="layui-form-item" style="margin-bottom: 0px;">
                    <div class="layui-inline ">
                        <div class="layui-input-inline " style="width: 100px;" >
                            <select name="module" id="">
                                <volist name="module_list" id="vo">
                                    <option value="{$vo.name}" <?php if($vo['name'] == $module){ echo 'selected';} ?>>{$vo.title}</option> 
                                </volist>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-primary " style="font-weight:800;" lay-submit="" lay-filter="demo2"><i class="layui-icon ">&#xe615;</i>搜索</button>
                    </div>
                </div>
            </form>
        </fieldset>
            <!-- layui-card-body开始 -->
            <div class="layui-card-body layui-nopadding " >
                <table  class="layui-table layui-nomargin" >
                    <thead> 
                        <tr>
                       <!--      <td width="20px">
                                <input type="checkbox"  id="check-box-all" class="layui-form-checkbox">
                            </td> -->
                            <th>排序</th>
                            <th>名称</th>
                            <th>地址</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="sortable">
                        <volist name ="module_info" id="vo">
                            <tr lay-filter="test3">
                                <!-- <th style="text-align:center;">
                                    <input type="checkbox" class="check-box " name="id[]" value="{$key}">
                                </th> -->
                                <td class="key">{$key}</td>
                                <td>{$vo.name}</td>
                                <td>{$vo.url}</td>
                                <td>
                                    <switch name="vo.is_show">
                                        <case value="1"><span style="color:green">显示</span></case>
                                        <case value="2"><span style="color:orange">隐藏</span></case>
                                    </switch>
                                </td>
                                <td type="text/html" id="action_bar" style="width: 85px;">
                                    <div class="layui-btn-group">
                                        <button type="button" class="layui-btn layui-btn-xs layui-btn-primary update-btn" style="font-weight:800 ;" data-id="{$key}" title="编辑">
                                          <i class="layui-icon">&#xe642;</i>
                                        </button>
                                      </div>
                                </td>
                            </tr>
                        </volist>
                    </tbody>
                </table>
                <!-- 分页开始 -->
                <div class="layui-table-page">
                    <div id="layui-table-page1">
                        <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
                            {$page|default=''}
                        </div>
                    </div>
                </div>
                <!-- 分页结束 -->
            </div>
            <!-- layui-card-body结束 -->
    </div>
<include file='public/scripts'>
<script src="__STATIC__/js/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript">
        //开启jquery-ui的排序功能
      $(function() {
        $( "#sortable" ).sortable({
            opactiy:0.6,
            revert:true,
            cursor:"move",
            update:function(){
                var new_sort = [];
                $("#sortable").find('.key').each(function(){
                    new_sort.push($(this).html());
                });
                $.ajax({
                    url: "{:cmf_plugin_url('ModuleConfig://nav/sort')}",
                    type: "post",
                    data:{
                        key:new_sort,
                        module:'{$module}'
                    }
                });
            }
        });
        // $( "#sortable" ).disableSelection();
      });  
        //修改
        $('.update-btn').on('click', function(){
            let id = $(this).data('id');
            let url = "{:cmf_plugin_url('ModuleConfig://nav/editPage')}?sort="+id+"&module={$module}";
            layer.open({
            type: 2
            ,title: '编辑'
            ,shadeClose: true
            ,shade: 0.8
            ,area: ['800px', '600px']
            ,btn:['保存','关闭']//操作按钮
            ,fixed:false
            ,content: url //iframe的url
            ,yes:function(index, layero){
                //调用子页面方法
                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
                parentInfo = iframeWin.callbackdata();
                // parentInfo = window["layui-layer-iframe" + index].callbackdata();
            },
            btn2:function(index, layero){
            }
            });
        });
</script>
</body>
</html>